<template>
    <div class="container yuan-container">

        <a-card title="审核管理">
            <a-tabs type="card" :default-active-key="pageType" @change="tabChange">
                <a-tab-pane v-for="item in typeArr" :key="item.val" :tab="item.title"></a-tab-pane>
            </a-tabs>
            <div class="filter-panel" v-if="pageType==='1'">
                <div class="filter-list">
                    <span>需求名称：</span>
                    <a-input-search allowClear v-model="pageParams.demandName" placeholder="请输入需求名称" @search="resetList" />
                </div>
                <div class="filter-list">
                    <span>分类：</span>
                    <a-select v-model="pageParams.category" @change="resetList" allowClear placeholder="请选择分类">
                        <a-select-option value="生产研发需求">生产研发需求</a-select-option>
                        <a-select-option value="技术服务需求">技术服务需求</a-select-option>
                        <a-select-option value="临床效果需求">临床效果需求</a-select-option>
                        <a-select-option value="生产技术需求">生产技术需求</a-select-option>
                        <a-select-option value="其他">其他需求</a-select-option>
                    </a-select>
                </div>
                <div class="filter-list">
                    <span>细分领域：</span>
                    <a-select v-model="pageParams.subCategoryStr" @change="resetList" allowClear placeholder="请选择细分领域">
                        <a-select-option v-for="item in territoryList" :value="item.content"
                            :key="item.id">{{item.content}}</a-select-option>
                    </a-select>
                </div>

            </div>
            <div class="filter-panel" v-else>
                <div class="filter-list">
                    <span>成果名称：</span>
                    <a-input-search allowClear v-model="pageParams.achievementName" placeholder="请输入成果名称" @search="resetList" />
                </div>
                <div class="filter-list">
                    <span>成果类别：</span>
                    <a-select v-model="pageParams.achievementCategory" @change="resetList" allowClear placeholder="请选择成果类别">
                        <a-select-option value="发明专利">发明专利</a-select-option>
                        <a-select-option value="实用新型专利">实用新型专利</a-select-option>
                        <a-select-option value="外观设计专利">外观设计专利</a-select-option>
                        <a-select-option value="技术">技术</a-select-option>
                        <a-select-option value="软件著作权">软件著作权</a-select-option>
                        <a-select-option value="版权等其他著作权">版权等其他著作权</a-select-option>
                        <a-select-option value="集成电路布图设计">集成电路布图设计</a-select-option>
                        <a-select-option value="植物新品种">植物新品种</a-select-option>
                        <a-select-option value="其他">其他</a-select-option>
                    </a-select>
                </div>
                <div class="filter-list">
                    <span>所属技术类别：</span>
                    <a-select v-model="pageParams.belongToTechnologyCategory" @change="resetList" allowClear
                        placeholder="请选择所属技术类别">
                        <a-select-option v-for="item in territoryList" :value="item.content"
                            :key="item.id">{{item.content}}</a-select-option>
                    </a-select>
                </div>

            </div>
            <div class="table">
                <a-table bordered :loading="loading" :rowKey="(item,i)=>item.id" :columns="columns" :data-source="pageList"
                    :pagination="pagination">
                    <template slot='action' slot-scope="text, record, index">
                        <div>
                            <template v-if="record.state===0 && $utilCheckPermission(['auditManagementAudit'])">
                                <a-button type="primary" @click="clickEdit(record)">修改</a-button>
                                <a-button style="margin-left:10px" type="warning" @click="clickAuth(record)">审核</a-button>
                            </template>

                            <a-button style="margin-left:10px" type="primary" @click="clickShow(record)"
                                v-if="$utilCheckPermission(['auditManagementDetail'])">
                                查看
                            </a-button>
                        </div>
                    </template>
                </a-table>
            </div>
        </a-card>
        <DemandDetailVue :visible="detailVisible" @closeModal="() => detailVisible = false" :authId="authId"
            :relevanceId="relevanceId" :isShow="isShow" @resetList="getList" v-if="pageType==='1'" />
        <AchDetail :visible="detailVisible" @closeModal="() => detailVisible = false" :authId="authId" :relevanceId="relevanceId"
            :isShow="isShow" @resetList="getList" v-else />

        <DemandEditDetailVue :visible="editVisible" @closeModal="() => editVisible = false" @resetList="getList" :editId="editId"
            :isShow="false" v-if="pageType==='1'" />
        <AchEditDetailVue :visible="editVisible" @closeModal="() => editVisible = false" @resetList="getList" :editId="editId"
            :isShow="false" v-else />

    </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import DemandDetailVue from "./demandDetail.vue";
import AchDetail from "./achDetail.vue";
import AchEditDetailVue from "@/views/achievement/detail.vue";
import DemandEditDetailVue from "@/views/demand/detail.vue";

import api from "@/api/api";
import { h } from "vue";
@Component({
    name: "tpl",
    components: { DemandDetailVue, AchDetail, DemandEditDetailVue, AchEditDetailVue },
})
export default class extends Vue {
    loading = false;
    detailVisible = false;
    pageList = [];
    pageParams = {};
    pagination = {
        current: 1,
        pageSize: 10,
        total: 0,
        onChange: this.pageChange,
    };
    columns: any[] = [];
    columnsDemand = [
        {
            title: "序号",
            dataIndex: "index",
            key: "index",
            align: "center",
            customRender: (text: string, record: any, index: number) => `${index + 1}`,
        },
        {
            align: "center",
            dataIndex: "companyName",
            key: "companyName",
            title: "企业/单位名称",
        },
        {
            align: "center",
            dataIndex: "demandName",
            key: "demandName",
            title: "需求名称",
        },
        {
            align: "center",
            dataIndex: "category",
            key: "category",
            title: "需求分类",
        },
        {
            align: "center",
            dataIndex: "subCategory",
            key: "subCategory",
            title: "细分领域",
            customRender: (text: string, record: any, index: number) => {
                if (record.subCategory) {
                    return JSON.parse(record.subCategory).join(",");
                }
                return "";
            },
        },

        {
            align: "center",
            dataIndex: "location",
            key: "location",
            title: "所属区域",
            customRender: (text: string, record: any, index: number) => {
                if (record.location) {
                    return record.location.province + record.location.city + record.location.district;
                }
                return "--";
            },
        },
        {
            align: "center",
            dataIndex: "investmentMin",
            key: "investmentMin",
            title: "预计投入金额范围",
            customRender: (text: string, record: any, index: number) => {
                if (record.investmentMin) {
                    return record.investmentMin + "-" + record.investmentMax + "万元";
                }
                return "--";
            },
        },
        {
            align: "center",
            dataIndex: "state",
            key: "state",
            title: "状态",
            customRender: (text: string, record: any, index: number) => {
                const data = {
                    0: { title: "待审核", class: "status-words c-primary" },
                    1: { title: "已驳回", class: "status-words c-danger" },
                    2: { title: "已通过", class: "status-words c-success" },
                };
                const dataOne = data[record.state] || {};
                const dom = h("div", { class: dataOne.class }, dataOne.title);
                return dom;
            },
        },
        {
            align: "center",
            dataIndex: "action",
            key: "action",
            title: "操作",
            width: 300,
            scopedSlots: { customRender: "action" },
        },
    ];
    columnsAch = [
        {
            title: "序号",
            dataIndex: "index",
            key: "index",
            align: "center",
            customRender: (text: string, record: any, index: number) => `${index + 1}`,
        },
        {
            align: "center",
            dataIndex: "achievementPrincipal",
            key: "achievementPrincipal",
            title: "成果负责人",
        },
        {
            align: "center",
            dataIndex: "achievementName",
            key: "achievementName",
            title: "成果名称",
        },
        {
            align: "center",
            dataIndex: "achievementCategory",
            key: "achievementCategory",
            title: "成果类别",
        },
        {
            align: "center",
            dataIndex: "belongToTechnologyCategory",
            key: "belongToTechnologyCategory",
            title: "所属技术分类",
            customRender: (text: string, record: any, index: number) => {
                if (record.belongToTechnologyCategory) {
                    return JSON.parse(record.belongToTechnologyCategory).join(",");
                }
                return "";
            },
        },
        {
            align: "center",
            dataIndex: "location",
            key: "location",
            title: "所属区域",
            customRender: (text: string, record: any, index: number) => {
                if (record.location) {
                    return record.location.province + record.location.city + record.location.district;
                }
                return "--";
            },
        },
        {
            align: "center",
            dataIndex: "achievementYear",
            key: "achievementYear",
            title: "成果年份",
        },
        {
            align: "center",
            dataIndex: "status",
            key: "status",
            title: "状态",
            customRender: (text: string, record: any, index: number) => {
                const data = {
                    0: { title: "待审核", class: "status-words c-primary" },
                    1: { title: "已驳回", class: "status-words c-danger" },
                    2: { title: "已通过", class: "status-words c-success" },
                };
                const dataOne = data[record.state] || {};
                const dom = h("div", { class: dataOne.class }, dataOne.title);
                return dom;
            },
        },
        {
            align: "center",
            dataIndex: "action",
            key: "action",
            title: "操作",
            width: 300,
            scopedSlots: { customRender: "action" },
        },
    ];
    async getList() {
        this.pageList = [];
        this.loading = true;
        try {
            let res;
            if (this.pageType === "1") {
                res = await api.getDemandAuthList({
                    pageNum: this.pagination.current,
                    pageSize: this.pagination.pageSize,
                    ...this.pageParams,
                });
            } else {
                res = await api.getActAuthList({
                    pageNum: this.pagination.current,
                    pageSize: this.pagination.pageSize,
                    ...this.pageParams,
                });
            }

            this.pageList = res.data?.rows || [];
            this.pagination.total = res.data?.total || 0;
        } finally {
            this.loading = false;
        }
    }
    resetList() {
        this.pagination.current = 1;
        this.getList();
    }
    pageChange(page: number, pageSize: number) {
        this.pagination.pageSize = pageSize;
        this.pagination.current = page;
        this.getList();
    }
    typeArr = [
        { title: "需求审核", val: "1" },
        { title: "成果审核", val: "2" },
    ];
    pageType = "1";
    tabChange(e: string) {
        if (e === "1") {
            this.columns = this.columnsDemand;
        } else {
            this.columns = this.columnsAch;
        }
        this.pageParams = {};
        this.pageType = e;

        this.resetList();
    }

    mounted() {
        this.loading = true;
        Promise.all([this.getTerritoryList()]).then(() => {
            this.loading = false;
            this.columns = this.columnsDemand;
            this.getList();
        });
    }
    authId = "";
    relevanceId = "";
    isShow = false;
    clickAuth(item) {
        this.isShow = false;
        this.authId = item.id;
        this.relevanceId = item.relevanceId;
        this.detailVisible = true;
    }
    editId = "";
    editVisible = false;
    clickEdit(item) {
        this.editId = item.id;
        this.editVisible = true;
    }
    clickShow(item) {
        this.isShow = true;
        this.authId = item.id;
        this.relevanceId = item.relevanceId;
        this.detailVisible = true;
    }

    taskSourceList = [];
    async getTaskSourceList() {
        try {
            const res = await api.getSetting("2");
            this.taskSourceList = res.data;
        } finally {
            //this.loading = false;
        }
    }

    territoryList = [];
    async getTerritoryList() {
        try {
            const res = await api.getSetting("3");
            this.territoryList = res.data;
        } finally {
            //
        }
    }
}
</script>
<style scoped lang="scss">
.container {
}
</style>
